<template>
  <el-dialog
    v-model="show"
    title="添加商品"
    width="980"
    align-center
    :close-on-click-modal="false"
    :show-close="false"
  >
    <div class="content">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane
          v-for="(v, i) of tabs"
          :key="i"
          :label="v.label"
          :name="v.name"
        >
          <div class="table">
            <el-form :inline="true" :model="formInline" style="width: 100%">
              <div class="search-item">
                <div class="flex-s">
                  <el-form-item label="商品名称">
                    <el-input
                      v-model="formInline.name"
                      placeholder="请输入商品名称"
                      style="width: 200px"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="商品条形号">
                    <el-input
                      v-model="formInline.code"
                      placeholder="请输入商品条形码"
                      style="width: 200px"
                    >
                    </el-input>
                  </el-form-item>
                </div>
                <div class="left-box">
                  <div class="choice-btn">
                    <el-button round :icon="Search" color="#0071bb"
                      >查询</el-button
                    >
                    <el-button round :icon="RefreshLeft">重置</el-button>
                  </div>
                </div>
              </div>
            </el-form>
            <el-table :data="tableData" height="300" style="width: 100%">
              <el-table-column type="selection" width="55" label="全选" />
              <el-table-column
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
                v-for="(item, index) in headerArr"
                :key="index"
              >
                <template #default="scope">
                  <img
                    v-if="item.prop == 'img'"
                    class="goods_img"
                    :src="scope.row.img"
                  />
                </template>
              </el-table-column>
            </el-table>
            <!-- 底部分页 -->
            <div class="page_number">
              <el-pagination
                v-model:current-page="pager.currentPage"
                v-model:page-size="pager.pageSize"
                :disabled="!pager.total"
                layout="prev, pager, next, jumper,total"
                :total="pager.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div></div
        ></el-tab-pane>
      </el-tabs>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button round type="primary" @click="submit()" color="#0071bb"
          >确定</el-button
        >
        <el-button round @click="close()">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, ref, defineEmits } from "vue";
import { Search, RefreshLeft } from "@element-plus/icons-vue";
const emit = defineEmits(["close", "submit"]);
const formInline = ref({
  name: "",
  code: "",
});
const activeName = ref(1);
const tabs = [
  {
    label: "奶乳类",
    name: 1,
  },
  {
    label: "果蔬类",
    name: 2,
  },
  {
    label: "生鲜类",
    name: 3,
  },
];
const handleClick = () => {};
// 取消
const close = () => {
  emit("close");
};
const submit = () => {
  emit("submit");
};
const headerArr = ref<any>([
  { label: "序号", prop: "index", show: true },
  { label: "商品图片", prop: "img", show: true },
  { label: "商品名称", prop: "name", show: true },
  { label: "商品条码", prop: "code", show: true },
  { label: "商品库存", prop: "allNum", show: true },
  { label: "采购价", prop: "weekNum", show: true },
  { label: "零售价", prop: "dayNum", show: true },
]);
const tableData = ref();
// 初始化表格数据
const initData = () => {
  tableData.value = [
    {
      index: "1",
      img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
      name: "伯克材料3668649",
      code: "3668649",
      allNum: 100,
      weekNum: 0,
      dayNum: 5,
    },
    {
      index: "2",
      name: "伯克材料3668649",
      code: "——",
      allNum: 100,
      weekNum: 20,
      dayNum: 0,
      img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    },
    {
      index: "3",
      name: "伯克材料3668649",
      code: "——",
      allNum: 100,
      weekNum: 0,
      dayNum: 5,
      img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    },
    {
      index: "4",
      name: "伯克材料3668649",
      code: "——",
      allNum: 100,
      weekNum: 20,
      dayNum: 0,
      img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    },
    {
      index: "5",
      name: "伯克材料3668649",
      code: "——",
      allNum: 100,
      weekNum: 20,
      dayNum: 0,
      img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    },
    {
      index: "6",
      name: "伯克材料3668649",
      code: "——",
      allNum: 100,
      weekNum: 20,
      dayNum: 5,
      img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    },
    {
      index: "7",
      name: "伯克材料3668649",
      code: "——",
      allNum: 100,
      weekNum: 20,
      dayNum: 5,
      img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    },
  ];
};
const show = ref<boolean>(true);
// 分页
const pager = ref({
  currentPage: 1,
  pageSize: 10,
  total: 10,
});
// 改变pageSize
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
// 改变当前页码 currentPage
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
onMounted(() => {
  initData();
});
</script>

<style lang="scss" scoped>
:deep() {
  .el-tabs--card > .el-tabs__header {
    border-bottom: none !important;
  }
  .el-tabs__item {
    // border-bottom: 1px solid #ccc !important;
    margin: 0px 6px !important;
    border: 1px solid var(--el-border-color-light) !important;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    border: 1px solid var(--el-color-primary) !important;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    border: none !important;
  }
}
.desc {
  display: flex;
  margin-top: 10px;
  justify-content: space-between;
  align-items: center;
  color: #808080;
  margin: 10px 0;
}

.title {
  color: #4d4d4d;
  font-size: 16px;
  font-weight: 500;
}

.table {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.page_number {
  align-self: center;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 20px;
  font-size: 14px;
}
.goods_img {
  width: 30px;
  height: 50px;
}
.left-box {
  display: flex;
  justify-content: end;
  align-items: center;
  margin-left: 20px;
  .choice-btn {
    display: flex;
    justify-content: left;
  }
}
.search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
